<template lang="html">
  <el-aside :width="width">
    <div class="leftNav">
      <el-row class="tac" id="tac">
        <div id="logo">
          <div id="img_logo"></div>
        </div>
        <div :class="['tacList',act == 'survey' ? 'act' : '']" @click="goTo('/index/survey')">
          <img v-if="act == 'survey'" src="../../assets/img/index/xz_gk.png" alt="gk">
          <img v-else src="../../assets/img/index/tb_gk.png" alt="gk">
          <span>概况</span>
        </div>
        <div :class="['tacList',act == 'commodity' ? 'act' : '']" @click="goTo('/index/commodity/home?type_name=0')">
          <img v-if="act == 'commodity'" src="../../assets/img/index/xz_sp.png" alt="gk">
          <img v-else src="../../assets/img/index/tb_sp.png" alt="gk">
          <span>商品</span>
        </div>
        <div :class="['tacList',act == 'order' ? 'act' : '']" @click="goTo('/index/order/allOrder')">
          <img v-if="act == 'order'" src="../../assets/img/index/xz_dd.png" alt="gk">
          <img v-else src="../../assets/img/index/tb_dd.png" alt="gk">
          <span>订单</span>
        </div>
        <div :class="['tacList',act == 'shop' ? 'act' : '']" @click="goTo('/index/shop/customerManagement')">
          <img v-if="act == 'shop'" src="../../assets/img/index/xz_dp.png" alt="gk">
          <img v-else src="../../assets/img/index/tb_dp.png" alt="gk">
          <span>客户</span>
        </div>
        <div :class="['tacList',act == 'setting' ? 'act' : '']" @click="goTo('/index/setting/information')">
          <img v-if="act == 'setting'" src="../../assets/img/index/xz_sz.png" alt="gk">
          <img v-else src="../../assets/img/index/tb_sz.png" alt="gk">
          <span>设置</span>
        </div>
      </el-row>
    </div>
    <div class="outLogin" @click="outLogin">
      <img src="../../assets/img/out.png" alt="">
      <span>退出账号</span>
    </div>
  </el-aside>
</template>

<script>
    export default {
        name: "leftNav",
        data() {
            return {
                search: "",
                width: "100px",
                act: "survey",
            };
        },
        created() {
            this.act = this.$route.path.split("/")[2] || "survey";
        },
        watch: {
            $route: function(newVal) {
                let val = newVal.path.split("/");
                this.act = val[2];
            },
        },
        methods: {
            goTo(url, ev) {
                localStorage.removeItem('scrolltop')
                if (this.act == url.split("/")[3]) {
                    return false;
                }
                this.$router.push({
                    path: url
                });
            },
            outLogin() {
                window.localStorage.setItem("userInfo", "")
                window.localStorage.setItem("token", "");
                localStorage.clear()
                this.$router.replace({
                    path: "/login"
                });
            }
        },
    };
</script>

<style lang="scss" scoped>
    .el-aside {
        position: fixed;
        left: 0;
        // top: 90px;
        bottom: 0;
        height: 100%;
        transition: all 0.4s ease-in-out;
        background-color: #ffffff;
        z-index: 99;
        /*cursor: pointer;*/
        //box-shadow: 2px 0px 12px 0px rgba(0, 0, 0, 0.26);
        .leftNav {
            .tac {
                cursor: pointer;
                #logo {
                    width: 100px;
                    height: 90px;
                    background: #ffffff;
                }
                #img_logo {
                    width: 100px;
                    height: 61px;
                    margin: 0 auto;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                    background: url("../../assets/img/index/logo.png") center no-repeat;
                }
                .tacList {
                    width: 100px;
                    height: 50px;
                    line-height: 50px;
                    img {
                        margin-left: 20px;
                        width: 14px;
                        height: 14px;
                        margin-right: 5px;
                    }
                    &:hover {
                        //   background: url("../../assets/img/index/leftNav_bg.png") no-repeat
                        //     center;
                        //   width: 184px;
                        //   height: 50px;
                        //   background-size: 184px 50px;
                        //   font-size: 14px;
                        //   font-family: PingFang SC;
                        //   font-weight: 400;
                        //   color: #ffffff;
                    }
                }
                .act {
                    background: url("../../assets/img/index/leftNav_bg.png") no-repeat center;
                    width: 100px;
                    height: 50px;
                    background-size: 184px 50px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                    &:hover {
                        width: 100px;
                        height: 50px;
                        background-size: 184px 50px;
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                    }
                }
            }
        }
        .outLogin {
            cursor: pointer;
            width: 100%;
            height: 88px;
            background: #3A61CA;
            position: absolute;
            left: 0;
            bottom: 0;
            text-align: center;
            color: #FFFFFF;
            font-size: 14px;
            img {
                display: block;
                width: 17px;
                height: 14px;
                margin: 20px auto 8px auto;
            }
            &:hover {
                background: #365abb;
            }
        }
    }
</style>